<template>
	<view class="all">
		<view class="carp">
			<view class="carp_1">基本资料</view>
			<view class="carp_2">
				<text>我的头像</text>
				<view class="carp_2_1" :style="{
					'background-image': $img(info.avatar)
				}">
					<image src="@/static/images/xj.png" />
				</view>
			</view>
			<view class="carp_3">
				<text>昵称</text>
				<view class="carp3_1">
					<u-input :clearable='false' type="text" :value="info.nickname" />
				</view>
			</view>
		</view>
		<view class="carp">
			<view class="carp_1">个人成就</view>
			<view class="carp_4">
				<view class="carp_4_1">
					<text>*</text>姓名
				</view>
				<view class="carp_4_2">
					<u-input type="text" :value="info.username" />
				</view>
			</view>
			<view class="carp_4" style="padding:35rpx 0 35rpx 0;">
				<view class="carp_4_1">
					<text>*</text>性别
				</view>
				<view class="carp_4_3">
					<view class="carp_4_2_1" @click="xuan=0">
						<image v-if="xuan==0" src="@/static/img/yxzh.png" />
						<image v-else src="@/static/img/wxzh.png" />
						<text>男</text>
					</view>
					<view class="carp_4_2_1" @click="xuan=1">
						<image v-if="xuan==1" src="@/static/img/yxzh.png" />
						<image v-else src="@/static/img/wxzh.png" />
						<text>女</text>
					</view>
					<view class="carp_4_2_1" @click="xuan=2">
						<image v-if="xuan==2" src="@/static/img/yxzh.png" />
						<image v-else src="@/static/img/wxzh.png" />
						<text>保密</text>
					</view>
				</view>
			</view>

			<view class="carp_4" style="padding:35rpx 0 35rpx 0;">
				<view class="carp_4_1">
					出生年月
				</view>
				<view class="carp_4_2">
					<text class="xunz" v-if="info.birthday">{{info.birthday}}</text>
					<text class="xunz" v-else>请选择</text>
					<u-icon name="arrow-right" size='20' color='rgb(192, 196, 204)'></u-icon>
				</view>
			</view>
			<view class="carp_4">
				<view class="carp_4_1">
					<text>*</text>电话
				</view>
				<view class="carp_4_2">
					<u-input type="text" :value="info.phone" />
				</view>
			</view>
			<view class="carp_4">
				<view class="carp_4_1">
					<text>*</text>机构名称
				</view>
				<view class="carp_4_2">
					<u-input type="text" :value="info.institution" />
				</view>
			</view>
			<view class="carp_4">
				<view class="carp_4_1">
					<text>*</text>机构地址
				</view>
				<view class="carp_4_2">
					<u-input type="text" :value="info.institution_address" />
				</view>
			</view>
			<view class="carp_4">
				<view class="carp_4_1">
					<text>*</text>衣码尺寸
				</view>
				<view class="carp_4_2">
					<u-input type="text" :value="info.size" />
				</view>
			</view>
			<view class="carp_4">
				<view class="carp_4_1">
					<text>*</text>我的照片
				</view>
				<view class="carp_4_2">
					<u-upload action='http://www.example.com/upload' height='180' :action="action"
						:file-list="fileList"></u-upload>
					<!-- <image src="" mode=""></image> -->
					<!-- <u-input type="text" value="" /> -->
				</view>
			</view>
			<view class="carp_4">
				<view class="carp_4_1">
					<text>*</text>身份证号
				</view>
				<view class="carp_4_2">
					<u-input type="text" :value="info.card_no" />
				</view>
			</view>
			<view class="carp_41">
				<view class="carp_4_1">
					<text>*</text>身份证照片
				</view>
				<view class="carp_41_2">
					<view class="carp_41_3">
						<u-upload :max-count="1" :custom-btn="true">
							<view slot="addBtn" class="carp_41_3">
								<image src="@/static/img/sfzv.png" />
								<view class="fg">
									身份证正面
								</view>
							</view>
						</u-upload>
					</view>
					<view class="carp_41_3">
						<u-upload :max-count="1" :custom-btn="true">
							<view slot="addBtn" class="carp_41_3">
								<image src="@/static/img/sfzv.png" />
								<view class="fg">
									身份证反面
								</view>
							</view>
						</u-upload>
					</view>
				</view>
			</view>
		</view>

		<view class="bc">
			保存
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				fileList: [],
				xuan: '0',
			};
		},
		onLoad() {
			this.getinfo()
		},
		methods: {
			getinfo() {
				this.$api('usermsg/userBase').then(res => {
					this.info = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	.fg {
		text-align: center;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #7B7B7B;
		opacity: 1;
	}

	.bc {
		width: 300rpx;
		height: 88rpx;
		background: #FFD500;
		opacity: 1;
		border-radius: 44px;
		text-align: center;
		margin: 100rpx auto;
		line-height: 88rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #703F00;
		opacity: 1;
	}

	.carp {
		padding: 30rpx;

		.carp_41 {
			.carp_41_2 {
				.carp_41_3 {
					width: 330rpx;
					height: 215.69rpx;
					background-size: 100% 100%;
					background-repeat: no-repeat;

					image {
						width: 100%;
						height: 100%;
					}

				}

				display: flex;
				justify-content: space-between;
			}

			.carp_4_1 {
				padding-top: 35rpx;
				padding-bottom: 35rpx;

				text {
					color: #EE3E3E;
				}

				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				opacity: 1;
			}
		}

		.carp_4 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #F5F5F5;

			.carp_4_1 {
				text {
					color: #EE3E3E;
				}

				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				opacity: 1;
			}

			.carp_4_3 {
				.carp_4_2_1 {
					margin-right: 40rpx;
					display: flex;
					align-items: center;

					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 10rpx;
					}
				}

				width: 75%;
				display: flex;
				align-items: center;
			}

			.carp_4_2 {
				.xunz {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: rgb(192, 196, 204);
					opacity: 1;
				}

				width: 75%;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}

		.carp_1 {
			font-size: 42rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #141414;
			opacity: 1;
		}

		.carp_3 {
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			text {
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				opacity: 1;
			}

			.carp3_1 {
				display: flex;
				align-items: center;
				width: 80%;
				height: 80rpx;
				background: #F5F5F5;
				opacity: 1;
				border-radius: 8rpx;
				line-height: 80rpx;
				padding-left: 20rpx;

			}

		}

		.carp_2 {
			text {
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #333333;
				opacity: 1;
			}

			margin-top: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.carp_2_1 {
				background-size: 100% 100%;
				background-repeat: no-repeat;
				width: 100rpx;
				height: 100rpx;
				position: relative;
				border-radius: 100%;

				image {
					position: absolute;
					bottom: 0;
					right: 0;
					width: 40rpx;
					height: 40rpx;

				}
			}


		}
	}
</style>
